<html>
  <head>
    <title>Draggable (and Sortable) Table Columns</title>
    <script type=text/javascript src="dragtable.js"></script>
    <script type=text/javascript src="sorttable.js"></script>

    <style type=text/css>
      table.thin, table.thin td, table.thin tr, table.thin th {
        border: thin solid black;
        border-collapse: collapse;
        background-color: white;
      }
      #fixed {
        position: fixed;
        left: 400px;
        top: 100px;
      }
    </style>
  </head>
  <body>
    <h3>Table 1</h3>
    <table id=table class="thin draggable forget-ordering" cellpadding=2
      style="background: white;">
      <tr><th>Name</th><th>Date</th><th>Favorite Color</th></tr>
      <tr><td>Dan</td><td>1984-07-12</td><td>Blue</td></tr>
      <tr><td>Alice</td><td>1980-07-22</td><td>Green</td></tr>
      <tr><td>Ryan</td><td>1990-09-23</td><td>Orange</td></tr>
      <tr><td>Bob</td><td>1966-04-21</td><td>Red</td></tr>
    </table>

    <h3>Embedded+Fixed Table</h3>
    <table id=fixed>
      <tr><td width=200>&nbsp;</td>
          <td>
            <table class="thin draggable" cellpadding=2 style="background: white;">
              <tr><th>Name</th><th>Date</th><th>Favorite Color</th></tr>
              <tr><td>Dan</td><td>1984-07-12</td><td>Blue</td></tr>
              <tr><td>Alice</td><td>1980-07-22</td><td>Green</td></tr>
              <tr><td>Ryan</td><td>1990-09-23</td><td>Orange</td></tr>
              <tr><td>Bob</td><td>1966-04-21</td><td>Red</td></tr>
            </table>
          </td>
      </tr>
    </table>

    <h3>Big table!</h3>
    <table id="bigtable" class="thin draggable sortable">
      <tr>
        <th>Column&nbsp;1</th>
        <th>Column&nbsp;2</th>
        <th>Column&nbsp;3</th>
        <th>Column&nbsp;4</th>
        <th>Column&nbsp;5</th>
        <th>Column&nbsp;6</th>
        <th>Column&nbsp;7</th>
        <th>Column&nbsp;8</th>
        <th>Column&nbsp;9</th>
        <th>Column&nbsp;10</th>
        <th>Column&nbsp;11</th>
        <th>Column&nbsp;12</th>
        <th>Column&nbsp;13</th>
        <th>Column&nbsp;14</th>
        <th>Column&nbsp;15</th>
        <th>Column&nbsp;16</th>
        <th>Column&nbsp;17</th>
        <th>Column&nbsp;18</th>
        <th>Column&nbsp;19</th>
        <th>Column&nbsp;20</th>
      </tr>

      <tr>
      <td>LEM16B0</td>
      <td>A+heYkQ</td>
      <td>Zn+jheU</td>
      <td>BIwjnR4</td>
      <td>D7AQNOo</td>
      <td>+tX9hHU</td>
      <td>lCzO3gY</td>
      <td>NuNB5+8</td>
      <td>NCROHls</td>
      <td>YEXgX3w</td>
      <td>BBpXIPo</td>
      <td>PMuyFIA</td>
      <td>Yp82t7I</td>
      <td>Sag1G7M</td>
      <td>e6h/gLo</td>
      <td>7Zb3fwg</td>
      <td>LdjkcAc</td>
      <td>E8Tb2jI</td>
      <td>c4Sito0</td>
      <td>ieC5OlU</td>
      </tr>

      <tr>
      <td>94xUs30</td>
      <td>pK/dL+M</td>
      <td>rwzS1QI</td>
      <td>QdyJK8U</td>
      <td>uL4Pu4s</td>
      <td>nyQ/ZDY</td>
      <td>za+6n4Q</td>
      <td>YRMP7u0</td>
      <td>xuisAbA</td>
      <td>d1B/OCA</td>
      <td>2pwKOqk</td>
      <td>IsqlDJE</td>
      <td>9lBp7ps</td>
      <td>svb169c</td>
      <td>tvUbJDQ</td>
      <td>zzRc9qE</td>
      <td>nbfwF0M</td>
      <td>KUOP/YI</td>
      <td>LkMzqnQ</td>
      <td>9ZUTE1M</td>
      </tr>

      <tr>
      <td>mVABl8A</td>
      <td>aSdgW4c</td>
      <td>cWhV7Cg</td>
      <td>7Lsi9MY</td>
      <td>1XHo9CY</td>
      <td>oXHw03A</td>
      <td>gzN2b+U</td>
      <td>yItOtjM</td>
      <td>SlzpATc</td>
      <td>EkjTP4I</td>
      <td>6UxwQxU</td>
      <td>+SGuFwM</td>
      <td>aUP8xvM</td>
      <td>n8+TkLY</td>
      <td>bWN8k5w</td>
      <td>5Y1YI2Q</td>
      <td>6Hmwecs</td>
      <td>oacdZ6g</td>
      <td>r3pV81E</td>
      <td>qH70bhI</td>
      </tr>

      <tr>
      <td>yGa10BQ</td>
      <td>kxO5MNY</td>
      <td>uchMlPw</td>
      <td>r9y5LzI</td>
      <td>T+TSpyo</td>
      <td>i0GAQCU</td>
      <td>JJHoQMg</td>
      <td>aP5ZK60</td>
      <td>4AD4uoA</td>
      <td>xPzK9gI</td>
      <td>kcl79tM</td>
      <td>fUlf39w</td>
      <td>V1QWcIU</td>
      <td>ZGgJ20A</td>
      <td>+lKd4DA</td>
      <td>fD59uCU</td>
      <td>vTytU5w</td>
      <td>bSCub4E</td>
      <td>IIqwfI4</td>
      <td>ayZM5vA</td>
      </tr>

      <tr>
      <td>Cp4Lw/A</td>
      <td>RpsC81E</td>
      <td>Jk92jek</td>
      <td>2xG809k</td>
      <td>MF8VEUo</td>
      <td>mhhKCN8</td>
      <td>pqljvo4</td>
      <td>88h2DH0</td>
      <td>0TH4lYs</td>
      <td>nEE3XAs</td>
      <td>kOK/yoo</td>
      <td>zjJbmSo</td>
      <td>HgW+Ut8</td>
      <td>PzhK9m0</td>
      <td>uGshM5o</td>
      <td>3nf5FhE</td>
      <td>AzLwBpk</td>
      <td>i5CTrYU</td>
      <td>6l5OWcg</td>
      <td>MlNBIoU</td>
      </tr>

      <tr>
      <td>AAqrvZc</td>
      <td>hdS8Dgk</td>
      <td>Hc56vB4</td>
      <td>aZxg76g</td>
      <td>tQVdO4Q</td>
      <td>WQ91gCs</td>
      <td>VgZG7uo</td>
      <td>tvqxnVg</td>
      <td>J2k5tQE</td>
      <td>N3Rk5Ys</td>
      <td>srAHGNg</td>
      <td>a5GFpK4</td>
      <td>H/79kOs</td>
      <td>fYQ0DOI</td>
      <td>CrotV3c</td>
      <td>J2QyjM0</td>
      <td>7H1BhKY</td>
      <td>4tHYiQo</td>
      <td>Jo8K6O0</td>
      <td>3q8LY3Y</td>
      </tr>

      <tr>
      <td>3hl1Gvk</td>
      <td>f5kn8uE</td>
      <td>Knzrvco</td>
      <td>Z6EMG54</td>
      <td>NKRvXCc</td>
      <td>mIvuP5Y</td>
      <td>xxPq/9Q</td>
      <td>kgyfosg</td>
      <td>JmApi2A</td>
      <td>CWCVNQA</td>
      <td>MnwuWsk</td>
      <td>IEumljA</td>
      <td>/b83PYo</td>
      <td>WwzyxJ0</td>
      <td>Hn7OQvo</td>
      <td>2ztaFD8</td>
      <td>4TQi9hk</td>
      <td>fE8JC6I</td>
      <td>qBiFpp4</td>
      <td>kSNF3i0</td>
      </tr>

      <tr>
      <td>mXnRzQs</td>
      <td>MiaCbQc</td>
      <td>EMqIwK8</td>
      <td>yC0sMZM</td>
      <td>n7QAagQ</td>
      <td>VpUIZvE</td>
      <td>c0V7MIo</td>
      <td>8WqWZ5A</td>
      <td>P8I7KGE</td>
      <td>BeDYzq0</td>
      <td>DHZlJSo</td>
      <td>Au9Iufs</td>
      <td>76g2x4o</td>
      <td>zfPx+40</td>
      <td>zo+lrE4</td>
      <td>6gujThc</td>
      <td>sMhrM48</td>
      <td>KokWB2c</td>
      <td>KfiXmr4</td>
      <td>HOSRGwY</td>
      </tr>

      <tr>
      <td>HbYCzQ8</td>
      <td>LrG1Il0</td>
      <td>bK50Btg</td>
      <td>8Ioh12k</td>
      <td>TZD8dEM</td>
      <td>I1ESA4A</td>
      <td>7a7KjqE</td>
      <td>j3Tmrto</td>
      <td>7FmcSGA</td>
      <td>BYT5jC4</td>
      <td>6/sjF2M</td>
      <td>MubiSJA</td>
      <td>npwmALE</td>
      <td>wnTXa6s</td>
      <td>qYsJuis</td>
      <td>wLUPK7A</td>
      <td>rvfWNo8</td>
      <td>I716dtw</td>
      <td>/N7KgeQ</td>
      <td>WBA2jSk</td>
      </tr>

      <tr>
      <td>99LCiQM</td>
      <td>5LGxsCk</td>
      <td>86vJTe0</td>
      <td>hyNbHNs</td>
      <td>ITdA8pk</td>
      <td>GJzdeEo</td>
      <td>AE14tCk</td>
      <td>g8pKfFk</td>
      <td>TiiQUNA</td>
      <td>vUbVBVQ</td>
      <td>0nFq96c</td>
      <td>eCntsHE</td>
      <td>U0F2FNE</td>
      <td>tAabu3I</td>
      <td>qiWwt10</td>
      <td>hO6E59Y</td>
      <td>Uc3ZZqg</td>
      <td>y0rK5YM</td>
      <td>3CdTEJA</td>
      <td>kyV5Jrs</td>
      </tr>

      <tr>
      <td>bT2butc</td>
      <td>oVV0dmY</td>
      <td>bfxYPBQ</td>
      <td>gT5zWCg</td>
      <td>jDerQkc</td>
      <td>UpJIDlQ</td>
      <td>bOygRNI</td>
      <td>xTloGFE</td>
      <td>I5g9JiY</td>
      <td>1KuTY7o</td>
      <td>edqhloc</td>
      <td>7T7GZEg</td>
      <td>+wSAKJA</td>
      <td>szq/OXc</td>
      <td>X4J3aHc</td>
      <td>aKyAbpo</td>
      <td>p4aahGo</td>
      <td>aFJxHVs</td>
      <td>MAFQwFo</td>
      <td>IGJxsG4</td>
      </tr>

      <tr>
      <td>jZ4gyiA</td>
      <td>+BL9m8I</td>
      <td>CzMENVg</td>
      <td>xNYMGss</td>
      <td>U4Z+BAM</td>
      <td>IpJgAJs</td>
      <td>dHFrfCI</td>
      <td>uWGfMpI</td>
      <td>6Za4A4U</td>
      <td>nQ13z5E</td>
      <td>Mau5ZBk</td>
      <td>tJ3+2w4</td>
      <td>fiAF59w</td>
      <td>xt1sQq4</td>
      <td>mZELYvY</td>
      <td>QSoc718</td>
      <td>Yxw6Mb8</td>
      <td>tK3KzFU</td>
      <td>n8BrUww</td>
      <td>GpM8pqg</td>
      </tr>

      <tr>
      <td>9RlW8Ck</td>
      <td>YTRa0+8</td>
      <td>oPXRkW0</td>
      <td>oQd80QM</td>
      <td>iTQstow</td>
      <td>u2ZvxdM</td>
      <td>0Nv4V18</td>
      <td>/q7kN+E</td>
      <td>Ub6zAzs</td>
      <td>+k5MpDA</td>
      <td>ac1vT+A</td>
      <td>kW34QIM</td>
      <td>jbifIQk</td>
      <td>3GlMZt0</td>
      <td>ruVOk5k</td>
      <td>joPvrZQ</td>
      <td>Sq9MWc8</td>
      <td>bd2wS2E</td>
      <td>M2kltY8</td>
      <td>gi+sEpo</td>
      </tr>

      <tr>
      <td>lCpaA5A</td>
      <td>2c7+4eg</td>
      <td>IwWlgOQ</td>
      <td>nk1Rve4</td>
      <td>uBVNdF4</td>
      <td>mBXEuqc</td>
      <td>PfE6KNg</td>
      <td>gFfBzTk</td>
      <td>88HPznk</td>
      <td>7C7+5es</td>
      <td>NWL7S9w</td>
      <td>OUz6v+s</td>
      <td>vtJoyJM</td>
      <td>QI7aYUM</td>
      <td>WMUvXgQ</td>
      <td>ipbcVLI</td>
      <td>Eo/7Kwo</td>
      <td>QR9MUAQ</td>
      <td>SB8ARiw</td>
      <td>y8JAPCE</td>
      </tr>

      <tr>
      <td>9G4PmnQ</td>
      <td>JedMLCA</td>
      <td>0ZqATEE</td>
      <td>JckTgIk</td>
      <td>b7rY4GE</td>
      <td>/5CfGn8</td>
      <td>xw7/QNU</td>
      <td>a74hhVE</td>
      <td>2sgzMns</td>
      <td>IppLTrU</td>
      <td>DFiN0qw</td>
      <td>tm12Xtc</td>
      <td>ubDUBQU</td>
      <td>0v9E5iw</td>
      <td>du56+Vg</td>
      <td>zsIyvjo</td>
      <td>Joa8eLM</td>
      <td>+RKmB48</td>
      <td>C9jixbg</td>
      <td>QNh4OW4</td>
      </tr>

      <tr>
      <td>K9LtcSQ</td>
      <td>fqnP4BM</td>
      <td>6z6orss</td>
      <td>zGVSoAY</td>
      <td>C8w2JLw</td>
      <td>LvaNtpk</td>
      <td>Bk/5btc</td>
      <td>d4p4nXU</td>
      <td>K/ohAxk</td>
      <td>7WOIejQ</td>
      <td>phGqwbU</td>
      <td>uwA/0AQ</td>
      <td>+enpIrc</td>
      <td>QSNoCzI</td>
      <td>a92VnfY</td>
      <td>UbIclVA</td>
      <td>uRFaI9g</td>
      <td>swT5snQ</td>
      <td>oP81nkQ</td>
      <td>+vUtVeY</td>
      </tr>

      <tr>
      <td>ZMJouu4</td>
      <td>V0oaQKI</td>
      <td>jJgkaOk</td>
      <td>xQlVSyc</td>
      <td>D7hfP5w</td>
      <td>4PqBY9w</td>
      <td>sCURxfo</td>
      <td>kC/AW0E</td>
      <td>nB3Q42A</td>
      <td>1Ra9L70</td>
      <td>BIW91K0</td>
      <td>eOLZXmA</td>
      <td>ltNpAgY</td>
      <td>2L0kbpo</td>
      <td>yaI2lao</td>
      <td>VAPwyFU</td>
      <td>hC+kKoQ</td>
      <td>hSRoFyA</td>
      <td>MZJoayo</td>
      <td>7Bi+eLI</td>
      </tr>

      <tr>
      <td>TD6KRlc</td>
      <td>ZzimNzU</td>
      <td>OZUuoXA</td>
      <td>YOB5lWk</td>
      <td>1ZuwM9k</td>
      <td>SlbJEc8</td>
      <td>Jq4cXP0</td>
      <td>st4Vrdw</td>
      <td>v17lP94</td>
      <td>kh3j2Oo</td>
      <td>wH93CtY</td>
      <td>pq28jzY</td>
      <td>mkxra3c</td>
      <td>mzxc24U</td>
      <td>hwmWnAk</td>
      <td>4Jd/tuk</td>
      <td>ufordAs</td>
      <td>VvI/NVM</td>
      <td>UEX5otI</td>
      <td>cFILbrE</td>
      </tr>

      <tr>
      <td>Em4oTRs</td>
      <td>J94eTSY</td>
      <td>pN8B1is</td>
      <td>Vqy3BCA</td>
      <td>0huBOOA</td>
      <td>LPIQ9zM</td>
      <td>hmqhHiE</td>
      <td>mnJdL3I</td>
      <td>oAz5MR8</td>
      <td>4fujsiA</td>
      <td>cRLLv4o</td>
      <td>j3fDces</td>
      <td>rsHcArU</td>
      <td>0uyIAwg</td>
      <td>WOEtJYE</td>
      <td>qWy6/fw</td>
      <td>IRnoszY</td>
      <td>bjwBK2c</td>
      <td>cIrlVXw</td>
      <td>nH4CUfs</td>
      </tr>

      <tr>
      <td>LPN+K4w</td>
      <td>K/wLkbM</td>
      <td>vdTlIEw</td>
      <td>WHEfmf0</td>
      <td>kBMpLIc</td>
      <td>bPHy1/k</td>
      <td>+DNqhck</td>
      <td>R3dKIZQ</td>
      <td>d62KKig</td>
      <td>D3UbE28</td>
      <td>ceUAvAo</td>
      <td>2Gmfmcs</td>
      <td>+Z8O0Ng</td>
      <td>5532qf4</td>
      <td>uVG+kDg</td>
      <td>xOi41vU</td>
      <td>u2o707E</td>
      <td>V2ZVNmU</td>
      <td>Ntw0pB4</td>
      <td>XVdO14U</td>
      </tr>
    </table>
  </body>
</html>
